(Note: this is probably a silly question)
I have some vue code that I have written as practice in a code sandbox of mine in the following link: https://codesandbox.io/s/is-this-a-side-effect-p62khk?file=/src/App.vue
inside of the computed property I have written, it returns an object that references a function that is used by a click event in the current component:
computed: {
doSomething() {
return {
update:
this.something !== "doink" ? "You are okay" : "You are not okay",
doThis: this.task, //This is the referenced function used by the click event
};
},
},
Here is the template code with the click event:
<template>
{{ something }}
<button @click="doSomething.doThis">{{ "test" }}</button>
{{ doSomething.update }}
</template>
I would like to pass this returned object from the aforementioned computed property down as a prop to a child component. Also, this referenced method DOES mutate a single reactive state that I have defined in my data model:
Here is the referenced task method:
methods: {
task() {
this.something = "doink";
console.log("task1");
},
},
Here is the state within my data model:
data() {
return {
something: "bla",
};
},
Is this considered a "side-effect" even though I do not directly call its referenced method inside of its body but instead use it later inside of the previously shown click event (of which would most likely would be defined inside of a child component)
NOTE: the reason why I am asking this question is because I am using a library (devextreme) which has some components that required config objects. However, although all of the tutorials that I found show these components using their parent component's data model to store these, I would like these to be stored inside of computed props to have some of their configuration properties update based on certain state changes. AND, more importantly, keep my data model clean and only focused on storing state and NOT configuration for components. An example of these config objects being used in the data model can be shown here:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/Common/CustomTextEditorButtons/Vue/Light/
Any advice or recommendations for this would be much appreciated! Thanks!